<template>
  <div class="articlePreview">
    <el-row class="row">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="2">
            <span>[原创]</span>
          </el-col>
          <el-col :span="18">
            <el-link @click="clickArticle">[标题]</el-link>
          </el-col>
          <el-col :span="4">
            <span class="day">天</span>
          </el-col>
        </el-row>
        <el-row style="height: 30px">
          <el-col :span="20">
            <hr style="margin-top: 14px"/>
          </el-col>
          <el-col :span="4">
            <span style="line-height: 30px;">年月</span>
          </el-col>
        </el-row>
        <!--文本摘要和图片-->
        <el-row style="height: 210px">
          <el-col style="width: 300px;height:180px" :span="9">
            图片
            <img src="https://www.yanshisan.cn/image/cover/201963164541362.jpg" alt=""
                 style="display: block; width: 100%!important; height: 100%!important;">
          </el-col>
          <el-col style="float: right" :span="15">摘要</el-col>
        </el-row>
        <!--列表尾部-->
        <el-row>
          <el-col :span="4">
            <span style="line-height: 30px;">阅读</span>
          </el-col>
          <el-col :span="20">
            <hr style="margin-top: 14px"/>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="2">
            <i class="el-icon-eleme"/>标签
          </el-col>
          <el-col :offset="16" :span="2">
            <!--此处应该是循环-->
            <i class="el-icon-thumb">点击</i>
          </el-col>
          <el-col :span="2">
            <i v-if="true" class="el-icon-chat-round">讨论</i>
            <i v-if="false" class="el-icon-chat-line-round">讨论</i>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'articlePreview',
  props: {
    msg: undefined
  },
  methods: {
    clickArticle: function () {
      this.$router.push({name: 'articleInfo', params: {articleId: '1'}})
    }
  }
}
</script>

<style scoped>
  .row {
    z-index: 0;
  }

  .day {
    height: 60px;
    font-size: 30px;
    margin-bottom: 10px;
  }
</style>
